function createTableHead(head){//表头
    let tableHead= '';
    for(let i = 0;i<head.length;i++){
      tableHead += `<th>${head[i]}</th>`
    }
    tou.innerHTML = tableHead;
}
function createTbody(area,goods){//渲染表格数据
    var data = getData(area,goods);
    let bBody = '';
    // console.log(data)
    for(let i =0;i<data.length;i++){
      let bTr = `<td>${data[i].region}</td><td>${data[i].product}</td>`;
      
      if(area.length > goods.length && goods.length == 1){
        bTr = `<td>${data[i].product}</td><td>${data[i].region}</td>`;
       
      } 
      for(let k =0;k<data[i].sale.length;k++){
        bTr += `<td style="padding:0 10px;position:relative"  onmouseover="chagehover(${i},${k})" onmouseout="clearhover(${i},${k})" ><input onblur="yanzheng(${i},${k},'${data[i].region}','${data[i].product}')" style="width:60px;border:solid 2px #81d743;display:none"  type="text" value='${data[i].sale[k]}'> <text onclick="changeinputstau(${i},${k})">${data[i].sale[k]}</text><span style="position:absolute;border:solid 1px red;padding:5px ;top:0px;right:-35px;border-radius:5px;background:#f0f0f0;display:none;z-index:5" onclick="editclick(${i},${k})">编辑</span><div style="position:absolute;top:0;right:-70px;display:none;z-index:5;background:#f0f0f0;border:solid 1px red;padding:5px"><button onclick="clickSure(${i},${k},1,'${data[i].region}','${data[i].product}')">保存</button> <button onclick="clickSure(${i},${k},2,'${data[i].region}','${data[i].product}')">取消</button></div></td>`
      }
      bTr = `<tr>${bTr}</tr>`;
      bBody += bTr
    }
    shen.innerHTML = bBody;
    if(goods.length  == 1 && area.length > 1){
        createTableHead(tHead);
        mergeCell('table', 0, 0, 0);
    }else if(goods.length  > 1 && area.length == 1){
        createTableHead(tHead1);
        mergeCell('table', 0, 0, 0);
    }else if(goods.length  > 1 && area.length >1){
        createTableHead(tHead1);
        mergeCell('table', 0, 0, 0);
        mergeCell('table', 0, 0, 1);
    }
   
}
function mergeCell(table1, startRow, endRow, col) {//合并单元格
    var tb = document.getElementById(table1);
    if(!tb || !tb.rows || tb.rows.length <= 0) {
        return;
    }
    if(col >= tb.rows[0].cells.length || (startRow >= endRow && endRow != 0)) {
        return;
    }
    if(endRow == 0) {
        endRow = tb.rows.length - 1;
    }
    for(var i = startRow; i < endRow; i++) {
        // console.log(tb.rows[i + 1].cells[3])
        if(tb.rows[startRow].cells[col].innerHTML == tb.rows[i + 1].cells[col].innerHTML) { //如果相等就合并单元格,合并之后跳过下一行
            tb.rows[i + 1].removeChild(tb.rows[i + 1].cells[col]);
            tb.rows[startRow].cells[col].rowSpan = (tb.rows[startRow].cells[col].rowSpan) + 1;
        } else {
            mergeCell(table1, i + 1, endRow, col);
            break;
        }
    }
}
function getData(area,goods){//获取tbody的数据
    let data = [];
    let datafalse = localStorage.getItem('biaodata')
    let dataArr = sourceData
    if(datafalse){
        dataArr = JSON.parse(datafalse)
        sourceData = dataArr
    }
    for(let i = 0;i<dataArr.length;i++){
        if(area.indexOf(dataArr[i].region) !== -1 && goods.indexOf(dataArr[i].product) !== -1){
            data.push(dataArr[i]);
        }
    }
    return data;
}

function init(){
    let url =  decodeURI(window.location.hash.substring(1))
    let hashare = JSON.parse(url)
    createTbody(hashare.are,hashare.goods)
    createForm(area,'area','diqu',hashare.are);
    createForm(goods,'goods','shangpin',hashare.goods);
}

//修改失去焦点
function yanzheng(i,k,are,pro){
//    console.log(i,k,are,pro)
   let inp = document.getElementById('shuju').querySelectorAll("input")
   let d = i*12 + k 
   let val = inp[d].value
   if(isNaN(val)){
     alert('请输入数字')
     return
   }
   for(let b =0;b<sourceData.length;b++){
       if(sourceData[i].region == are && sourceData[i].product == pro){
        sourceData[i].sale[k] = val
       }
   }
}
// 点击保存时间
function savedata(){
 let obj = JSON.stringify(sourceData)
 window.localStorage.setItem("biaodata", obj)
 alert('保存成功')
}
// 点击单元格切换状态
function changeinputstau(i,k){
    // e.stopPropagation()
    let inp = document.getElementById('shuju').querySelectorAll("input")
    let text = document.getElementById('shuju').querySelectorAll("text")
    let div = document.getElementById('shuju').querySelectorAll("div")
    let span = document.getElementById('shuju').querySelectorAll("span")
    for(let j =0;j<inp.length;j++){
        inp[j].style.display = 'none'
        div[j].style.display = 'none'
        span[j].style.display = 'none'
        text[j].style.display = 'block'
    }
    let d = i*12 + k 
    inp[d].style.display = 'block'
    text[d].style.display = 'none'
    div[d].style.display = 'block'
}
// 鼠标移入事件
function chagehover(i,k){
    let span = document.getElementById('shuju').querySelectorAll("span")
    let d = i*12 + k 
    span[d].style.display = 'block'
}
// 鼠标移出事件
function clearhover(i,k){
    let span = document.getElementById('shuju').querySelectorAll("span")
    let d = i*12 + k 
    span[d].style.display = 'none'
}
// 点击编辑事件
function editclick(i,k){
    let inp = document.getElementById('shuju').querySelectorAll("input")
    let text = document.getElementById('shuju').querySelectorAll("text")
    let div = document.getElementById('shuju').querySelectorAll("div")
    let span = document.getElementById('shuju').querySelectorAll("span")
    for(let j =0;j<inp.length;j++){
        inp[j].style.display = 'none'
        div[j].style.display = 'none'
        span[j].style.display = 'none'
        text[j].style.display = 'block'
    }
    let d = i*12 + k 
    inp[d].style.display = 'block'
    text[d].style.display = 'none'
    div[d].style.display = 'block'
    span[d].style.display = 'none'
}
// 确定、取消事件
function clickSure(i,k,type,are,pro){
    let inp = document.getElementById('shuju').querySelectorAll("input")
    let text = document.getElementById('shuju').querySelectorAll("text")
    let div = document.getElementById('shuju').querySelectorAll("div")
    let d = i*12 + k 
    let val = inp[d].value
    inp[d].style.display = 'none'
    text[d].style.display = 'block'
    div[d].style.display = 'none'
   if(type == 2){
    alert('取消了')
   }else{
    if(isNaN(val)){
      alert('请输入数字')
      return
    }
    let datafalse = localStorage.getItem('biaodata')
    if(datafalse){
        let dataArr = JSON.parse(datafalse)
        sourceData = dataArr
    }
    for(let b =0;b<sourceData.length;b++){
        if(sourceData[b].region == are && sourceData[b].product == pro){
         sourceData[b].sale[k] = val
         text[d].innerHTML = val
         inp[d].value = val
         let obj = JSON.stringify(sourceData)
         window.localStorage.setItem("biaodata", obj)
         alert('保存成功')
        }
    }
   
   }
}
